<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>000HelloWorld</title>
    <link rel="stylesheet" href="css/animate.css">
    <style></style>
    <script src="../vendor/vue1.0.26.js"></script>
</head>
<body>

<!--
Vue.js 默认异步更新 DOM。每当观察到数据变化时，Vue 就开始一个队列，
将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发，
只会推入一次到队列中。等到下一次事件循环，Vue 将清空队列，只进行必要的 DOM 更新。
在内部异步队列优先使用 MutationObserver，如果不支持则使用 setTimeout(fn, 0)。
例如，设置了 vm.someData = 'new value'，DOM 不会立即更新，
而是在下一次事件循环清空队列时更新。我们基本不用关心这个过程，
但是如果想在 DOM 状态更新后做点什么，这会有帮助。
尽管 Vue.js 鼓励开发者沿着数据驱动的思路，避免直接修改 DOM，但是有时确实要这么做。
为了在数据变化之后等待 Vue.js 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback) 。
回调在 DOM 更新完成后调用。例如：
-->
<div id="app">{{msg}}</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello"
        }
    })
    vm.msg="new Hello"
    console.log(vm.$el.textContent=="new Hello")
    Vue.nextTick(function () {
        console.log(vm.$el.textContent=="new Hello")
    })
</script>


<!--
    应注意到 Vue.js 的计算属性不是简单的 getter。计算属性持续追踪它的响应依赖。
    在计算一个计算属性时，Vue.js 更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，
    缓存的结果才无效。因此，只要依赖不发生变化，访问计算属性会直接返回缓存的结果，而不是调用 getter。
    为什么要缓存呢？假设我们有一个高耗计算属性 A，它要遍历一个巨型数组并做大量的计算。
    然后，可能有其它的计算属性依赖 A。如果没有缓存，我们将调用 A 的 getter 许多次，超过必要次数。
    由于计算属性被缓存了，在访问它时 getter 不总是被调用。考虑下例：
-->
<!--
有时希望 getter 不改变原有的行为，每次访问 vm.example 时都调用 getter。
这时可以为指定的计算属性关闭缓存：
computed: {
  example: {
    cache: false,
    get: function () {
      return Date.now() + this.msg
    }
  }
}
-->


</body>
</html>

